<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<view>
					<tm-menubars title="复选框" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
					<tm-sheet :shadow="24">
						<view class="text-size-s text-weight-b mb-50 ">
							基础示例
						</view>
						<tm-checkbox v-model="checked" label="复选"></tm-checkbox>
						<tm-checkbox color="green" v-model="checked" label="我"></tm-checkbox>
						<tm-checkbox  color="bg-gradient-blue-accent" v-model="checked" label="复选" model="round">
						</tm-checkbox>
						<tm-checkbox  color="bg-gradient-pink-accent" v-model="checked" label="复选" model="round"
							round="rounded"></tm-checkbox>
						<view>
							<tm-checkbox :size="64" border-color="red" color="bg-gradient-red-accent" v-model="checked" label="大号"
								model="round" round="rounded"></tm-checkbox>
				
						</view>
				
					</tm-sheet>
					<tm-sheet :shadow="24">
						<view class="text-size-s text-weight-b mb-50">
							应用场景和外形
						</view>
						<tm-checkbox dense v-model="checked_1">
							<template v-slot:default="{checkData}">
								<tm-button :theme="checkData.checked?'bg-gradient-pink-accent':'grey'" :plan="!checkData.checked">选我
								</tm-button>
							</template>
						</tm-checkbox>
				
						<tm-checkbox dense v-model="checked_1">
							<template v-slot:default="{checkData}">
								<tm-button :fllowTheme="false" :theme="checkData.checked?'bg-gradient-orange-accent':'grey-lighten-4'" :shadow="0">选我
								</tm-button>
							</template>
						</tm-checkbox>
						<tm-checkbox dense v-model="checked_1">
							<template v-slot:default="{checkData}">
								<tm-button theme="grey-lighten-4" text :shadow="0">
									<tm-checkbox border-color="pink" color="bg-gradient-pink-accent" v-model="checkData.checked"
										model="round" round="rounded"></tm-checkbox>
									按钮状态
								</tm-button>
							</template>
						</tm-checkbox>
					</tm-sheet>
					<tm-sheet :shadow="24">
						<view class="text-size-s text-weight-b mb-50">
							复选框组
							<view>{{JSON.stringify(groupchecked)}}</view>
						</view>
						<tm-groupcheckbox @change="change">
							<tm-checkbox dense v-model="groupchecked.c_1">
								<template v-slot:default="{checkData}">
									<tm-button size="m" :theme="checkData.checked?'bg-gradient-pink-accent':'grey'"
										:plan="!checkData.checked">选我</tm-button>
								</template>
							</tm-checkbox>
				
							<tm-checkbox disabled dense v-model="groupchecked.c_2">
								<template v-slot:default="{checkData}">
									<tm-button size="m" :theme="checkData.checked?'bg-gradient-pink-accent':'grey-lighten-4'"
										:shadow="0">禁用</tm-button>
								</template>
							</tm-checkbox>
							<tm-checkbox dense v-model="groupchecked.c_3">
								<template v-slot:default="{checkData}">
									<tm-button :fllowTheme="false" size="m" :theme="checkData.checked?'bg-gradient-green-accent':'grey-lighten-4'"
										:shadow="0">选我</tm-button>
								</template>
							</tm-checkbox>
						</tm-groupcheckbox>
					</tm-sheet>
				
					<tm-sheet color="blue " :shadow="24">
						<view class="text-size-s text-weight-b mb-24 ">应用场景</view>
				
						<tm-grouplist :margin="16" :shadow="24">
							<tm-checkbox :inline="false" dense border-color="blue" color="bg-gradient-blue-accent"
								v-model="groupchecked.c_1">
								<tm-listitem right-icon-color="blue" :right-icon="groupchecked.c_1?'icon-check':''" :margin="[0,0]" class-style="round-b-0 " title="不同的选择样式"></tm-listitem>
							</tm-checkbox>
							<tm-listitem title="我被禁用">
								<template v-slot:rightIcon="">
									<tm-checkbox disabled dense  color="bg-gradient-blue-accent"
										v-model="groupchecked.c_2"></tm-checkbox>
								</template>
							</tm-listitem>
							<tm-listitem title="我被禁用">
								<template v-slot:rightIcon="">
									<tm-checkbox dense  color="bg-gradient-blue-accent"
										v-model="groupchecked.c_3"></tm-checkbox>
								</template>
							</tm-listitem>
						</tm-grouplist>
				
					</tm-sheet>
				
				
				</view>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmGroupcheckbox from "@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue"
	import tmCheckbox from "@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue"
	export default {
		components:{tmGrouplist,tmListitem,tmFullView,tmMenubars,tmSheet,tmButton,tmGroupcheckbox,tmCheckbox},
		data() {
			return {
				checked: true,
				checked_1: false,
				groupchecked: {
					c_1: false,
					c_2: false,
					c_3: false,
				}
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
